<template>
  <div>
    <h3>当前步骤剩余时间：{{openendtime}}</h3>
    <div id="containertwo" />
  </div>
</template>
<script>
// import { Graph } from "@antv/x6";
export default {
  name: "",
  data() {
    return {
      activeName: "first",
       time:'00:00:10',
       qty:0,
       openendtime:undefined,
       active:[
        {node:1,edges:2,odlnode:0,oldedges:1},
        {node:3,edges:3,odlnode:1,oldedges:2},
        {node:4,edges:4,odlnode:3,oldedges:3},
        {node:5,edges:6,odlnode:4,oldedges:4},
        {node:7,edges:7,odlnode:5,oldedges:6},
       ],
      data:{
        // 节点
        nodes: [
          {
            id: "node1",
            x: 10,
            y: 100,
            width: 170,
            height: 100,
            attrs: {
              label: {
                text: "CaCl2\nKCl\nK2SO4\nNH$HCO3",
                fontSize: "15px",
                lineHeight: "20px",
              },
              body:{
                stroke:"#1890ff"
              }
            },
          },
          {
            id: "node2",
            x: 270,
            y: 40,
            width: 100,
            height: 60,
            label: "残留物",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node3",
            x: 270,
            y: 200,
            width: 100,
            height: 60,
            label: "气体",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node4",
            x: 470,
            y: 40,
            width: 100,
            height: 60,
            label: "溶液",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node5",
            x: 670,
            y: 40,
            width: 100,
            height: 60,
            label: "悬浊液",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node6",
            x: 570,
            y: 380,
            width: 100,
            height: 60,
            label: "过滤",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node7",
            x: 370,
            y: 300,
            width: 100,
            height: 60,
            label: "固态",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node8",
            x: 370,
            y: 450,
            width: 100,
            height: 60,
            label: "液态",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node9",
            x: 100,
            y: 450,
            width: 100,
            height: 60,
            label: "纯净的Kcl溶液",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
        ],
        // 边
        edges: [
          {
            source: "node1",
            target: "node3",
            vertices: [
              { x: 320, y: 150 },
              { x: 320, y: 150 },
            ],
          },
          {
            source: "node1",
            target: "node2",
            vertices: [
              { x: 320, y: 150 },
              { x: 320, y: 150 },
            ],
            attrs: {
              line: {
                stroke: "#1890ff",
                strokeDasharray: 5,
                targetMarker: "classic",
                style: {
                  animation: "ant-line 30s infinite linear",
                },
              },
            },
          },
          {
            source: "node2",
            target: "node4",
            labels: "2",
          },
          {
            source: "node4",
            target: "node5",
            labels: "3",
          },
          {
            source: "node5",
            target: "node6",
            vertices: [
              { x: 820, y: 70 },
              { x: 820, y: 410 },
            ],
            labels: "4",
          },
          {
            source: "node6",
            target: "node7",
            vertices: [
              { x: 520, y: 410 },
              { x: 520, y: 350 },
              { x: 520, y: 330 },
            ],
            labels: [
              {
                attrs: { label: { text: "5" } },
                position: {
                  distance: 0.2,
                },
              },
            ],
          },
          {
            source: "node6",
            target: "node8",
            vertices: [
              { x: 520, y: 410 },
              { x: 520, y: 480 },
              { x: 520, y: 480 },
            ],
          },
          {
            source: "node8",
            target: "node9",
            labels: "6",
          },
        ],
      },
      graph:undefined,
    };
  },
  mounted() {
    // this.initGraph();
  },
  methods: {
    dateHandle(end){
      // 使用定时器，每秒执行获取时间，执行一次函数
      let nowTime=this.$moment().format("YYYY-MM-DD 00:00:00");
        let endTime=this.$moment().format("YYYY-MM-DD "+end);//活动结束时间
      let setInt=setInterval(() => {
        let changeTime=new Date(endTime).getTime()-new Date(nowTime).getTime();//时间戳差值
        if(changeTime<=0){
          clearInterval(setInt)
          if(this.qty==5)
          {
            return;
          }
          this.data.edges[this.active[this.qty].oldedges].attrs=undefined;
          this.data.nodes[this.active[this.qty].odlnode].attrs.body.stroke=undefined;
          this.data.nodes[this.active[this.qty].node].attrs.body.stroke="#1890ff";
          this.data.edges[this.active[this.qty].edges].attrs={
              line: {
                stroke: "#1890ff",
                strokeDasharray: 5,
                targetMarker: "classic",
                style: {
                  animation: "ant-line 30s infinite linear",
                },
              },
            }
            this.qty++;
             this.initGraph();
        }else{
          endTime = new Date(endTime).getTime()-1000;
          this.openendtime=this.$moment(endTime).format("HH:mm:ss")
        }
      }, 1000); 
    },
    initGraph() {
      // 1. 节点 nodes 和边 edges 字段 的 JSON 数据
      var datacan = this.data;

      // 2. 渲染画布
       this.graph = new Graph({
        container: document.getElementById("containertwo"),
        width: 900,
        height: 600,
      });

      // 3. 渲染我们的节点和边
      this.graph.fromJSON(datacan);
      this.dateHandle(this.time);
    },
  },
};
</script>
